<template>
  <div v-loading="loading" element-loading-text="正在批改中">
    <div class="container">
      <div class="search-box">
        <el-row :gutter="10">
          <el-col :span="16" class="se">
            <el-button @click="gotoTargetPage" class="back">返回</el-button>
          </el-col>
          <div class="acatar">77u
            <UserAcatar @transfer="change" />
          </div>
        </el-row>
      </div>
    </div>
    <div class="infoContainer">
      <div>
        <h1 style="color: #fdcb9e; font-size: 30px">
          {{ assignmentInfo.assignment_title }}
        </h1>
        <div style="display: flex; justify-content: space-between">
          <div>
            <div>
              <span>发布教师：{{ assignmentInfo.teacher_name }}</span>
              <span>发布时间：{{ assignmentInfo.publish_time }}</span>
            </div>
            <!-- 这个应该展示学生头像 -->
            <span>作者：<span>{{
              assignmentInfo.student_name
              ? assignmentInfo.student_name
              : "***"
            }}</span></span>
          </div>
          <div>
            <span style="color: #fed71a; font-size: 19px">{{
              (
                assignmentInfo.total_points *
                (allScore / allProportion)
              ).toFixed(2)
            }}</span><span style="color: #12aa9c; font-size: 19px">/{{ assignmentInfo.total_points }}</span><span
              style="color: #12aa9c">分</span>
          </div>
        </div>
        <!-- <el-avatar :size="size" :src="'http://localhost:3000/image/getcourseimage/' + $route.query.row.avatar"></el-avatar> -->
      </div>
    </div>

    <div class="work-detail">
      <div class="board-column">
        <el-collapse v-model="activeNames">
          <el-collapse-item
            name="批改情况"
            v-if="
              information.auth === 'teacher_per' &&
              assignmentInfo.student_correct == '1'
            "
          >
            <template slot="title">
              <span style="font-size: 23px; font-weight: 700">批改情况</span>
            </template>
            <div class="studentInfo">
              <el-table
                :data="students"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
              >
                <el-table-column align="center" label="头像" width="80">
                  <template slot-scope="scope">
                    <el-avatar :size="50" :src="scope.row.avatar
                        ? `http://localhost:3000/image/getavatar/${scope.row.avatar}`
                        : circleUrl
                      "></el-avatar>
                  </template>
                </el-table-column>

                <el-table-column width="180px" align="center" label="姓名">
                  <template slot-scope="scope">
                    <span>{{ scope.row.student_name }}</span>
                  </template>
                </el-table-column>

                <el-table-column width="120px" align="center" label="批改情况">
                  <template slot-scope="scope">
                    <span v-if="scope.row.score">{{ scope.row.score }}分</span>
                    <el-tag type="danger" v-if="!scope.row.score">未批改</el-tag>
                  </template>
                </el-table-column>
                <el-table-column width="120px" align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="danger"
                      v-if="scope.row.isadopt == 'false' || !scope.row.isadopt"
                      @click="adopt(scope.row)"
                      >采纳</el-button
                    >
                    <el-button
                      type="success"
                      v-if="scope.row.isadopt == 'true'"
                      @click="adopt(scope.row)"
                      >已采纳</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item name="单选题" v-if="list.singleChoiceQuestions && list.singleChoiceQuestions.length
            ">
            <template slot="title">
              <span style="font-size: 23px; font-weight: 700">单项选择题(共{{ list.singleChoiceQuestions.length }}题, 每题{{
                list.singleChoiceQuestions[0].proportion
              }}分, 共{{
  list.singleChoiceQuestions.length *
  list.singleChoiceQuestions[0].proportion
}}分)</span>
              <span style="color: #134857; font-size: 20px; margin-left: 10px">总共得分:<span style="color: #2486b9">{{
                singleAllScore }}分</span></span>
            </template>
            <div v-for="(element, questionIndex) in list.singleChoiceQuestions"
              v-click-outside="{ handler: hideButtons, element: element }" :key="element.id" class="board-item">
              <!-- 单选题模板 -->
              <div v-if="element.questionType == '单选题'" class="item" :class="{ active: element.showAdd }"
                @click="element.showAdd = true">
                <div class="question" style="margin-bottom: 20px">
                  <div style="">
                    <span style="color: red; font-size: 20px; margin-right: ">*</span><span class="questionNumber">{{
                      questionIndex + 1 }}.</span>
                    <span class="questionContent" v-show="!element.editing">{{
                      element.question
                    }}</span>
                  </div>
                  <div>
                    <span class="score" style="color: #ccc" v-show="!element.editScore"
                      @click="changeScore(element, questionIndex)">{{ element.proportion }} 分</span>
                  </div>
                </div>
                <div>
                  <div v-for="(optionElement, optionsIndex) in element.optionsList" :key="optionElement.id"
                    @mouseenter="optionElement.isHovered = false" @mouseleave="optionElement.isHovered = true"
                    class="board-item" style="diplay: flex; justify-content: space-between">
                    <div style="
                        display: flex;
                        align-items: center;
                        padding-left: 50px;
                        margin-bottom: 20px;
                        font-size: 16px;
                      ">
                      <span style="margin-left: 8px" :class="{
                        studentAnswer:
                          element.studentAnswer == optionElement.content,
                      }">
                        {{ optionsItem[optionsIndex] }}.
                        {{ optionElement.content }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="getScore" :class="{
                  correct: element.proportion == element.score,
                  mistake: element.score == 0,
                }" v-if="typeof element.score === 'number'">
                  <span>本题得分:<span style="font-weight: 700">{{
                    element.score
                  }}</span>分</span>
                </div>
                <el-collapse accordion>
                  <el-collapse-item>
                    <template slot="title">
                      <div style="display: flex; algin-items: center">
                        <span style="font-size: 18px; marign-left: 10px">正确答案</span><img style="margin-left: 10px"
                          src="../../../public/correct/correct.svg" alt="" />
                      </div>
                    </template>
                    <div>
                      {{
                        optionsItem[
                          element.optionsList.findIndex((item) => {
                            return item.content == element.answer;
                          })
                        ]
                      }}
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="多选题" v-if="list.multipleChoiceQuestions &&
            list.multipleChoiceQuestions.length
            ">
            <template slot="title">
              <span style="font-size: 23px; font-weight: 700">多项选择题(共{{ list.multipleChoiceQuestions.length }}题,
                每题{{ list.multipleChoiceQuestions[0].proportion }}分, 共{{
                  list.multipleChoiceQuestions.length *
                  list.multipleChoiceQuestions[0].proportion
                }}分)</span>
              <span style="color: #134857; font-size: 20px; margin-left: 10px">总共得分:<span style="color: #2486b9">{{
                multipleAllScore }}分</span></span>
            </template>
            <!-- 多选题模板 -->
            <div v-for="(element, questionIndex) in list.multipleChoiceQuestions" :key="element.id" class="board-item">
              <!-- 多选题模板 -->
              <div v-if="element.questionType == '多选题'" class="item" :class="{ active: element.showAdd }"
                @click="element.showAdd = true">
                <div class="question" style="margin-bottom: 20px">
                  <div style="">
                    <span style="color: red; font-size: 20px; margin-right: ">*</span><span class="questionNumber">{{
                      questionIndex + 1 }}.</span>
                    <span class="questionContent" v-show="!element.editing"
                      @click="clickQuestion(element, questionIndex)">{{ element.question }}</span>
                  </div>
                  <div>
                    <span class="score" style="color: #ccc" v-show="!element.editScore"
                      @click="changeScore(element, questionIndex)">{{ element.proportion }} 分</span>
                  </div>
                </div>
                <div>
                  <div v-for="(optionElement, optionsIndex) in element.optionsList" :key="optionElement.id"
                    @mouseenter="optionElement.isHovered = false" @mouseleave="optionElement.isHovered = true"
                    class="board-item" style="diplay: flex; justify-content: space-between">
                    <div style="
                        display: flex;
                        align-items: center;
                        padding-left: 50px;
                        margin-bottom: 20px;
                        font-size: 16px;
                      ">
                      <span @click="
                        clickOptions(
                          optionElement,
                          questionIndex,
                          optionsIndex
                        )
                        " style="margin-left: 8px" :class="{
    studentAnswer: element.studentAnswer.includes(
      optionElement.content
    ),
  }">
                        {{ optionsItem[optionsIndex] }}.
                        {{ optionElement.content }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="getScore" :class="{
                  correct: element.proportion == element.score,
                  mistake: element.score == 0,
                  warning:
                    element.score != 0 && element.score < element.proportion,
                }" v-if="typeof element.score === 'number'">
                  <span>本题得分:<span style="font-weight: 700">{{
                    element.score
                  }}</span>分</span>
                </div>
                <el-collapse accordion>
                  <el-collapse-item>
                    <template slot="title">
                      <div style="display: flex; algin-items: center">
                        <span style="font-size: 18px; marign-left: 10px">正确答案</span><img style="margin-left: 10px"
                          src="../../../public/correct/correct.svg" alt="" />
                      </div>
                    </template>
                    <div>
                      {{
                        element.answer.length > 0
                        ? element.answer
                          .map((item) => {
                            return optionsItem[
                              element.optionsList.findIndex(
                                (i) => i.content == item
                              )
                            ];
                          })
                          .join("")
                        : ""
                      }}
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="简答题" v-if="list.shortAnswerQuestions && list.shortAnswerQuestions.length">
            <template slot="title">
              <span style="font-size: 23px; font-weight: 700">简答题(共{{ list.shortAnswerQuestions.length }}题, 每题{{
                list.shortAnswerQuestions[0].proportion
              }}分, 共{{
  list.shortAnswerQuestions.length *
  list.shortAnswerQuestions[0].proportion
}}分)</span>
              <span style="color: #134857; font-size: 20px; margin-left: 10px">总共得分:<span style="color: #2486b9">{{
                shortAllScore }}分</span></span>
            </template>
            <div v-for="(element, questionIndex) in list.shortAnswerQuestions" :key="element.id" class="board-item">
              <!-- 简答题模板 -->
              <div v-if="element.questionType == '简答题'" class="item" :class="{ active: element.showAdd }"
                v-click-outside="{ handler: hideButtons, element: element }" @click="element.showAdd = true">
                <div class="question" style="margin-bottom: 20px">
                  <div>
                    <span style="color: red; font-size: 20px; margin-right: ">*</span><span class="questionNumber">{{
                      questionIndex + 1 }}.</span>
                    <span class="questionContent" v-show="!element.editing"
                      @click="clickQuestion(element, questionIndex)">{{ element.question }}</span>
                  </div>
                  <div>
                    <span class="score" style="color: #ccc" v-show="!element.editScore"
                      @click="changeScore(element, questionIndex)">{{ element.proportion }} 分</span>
                  </div>
                </div>
                <div style="border: 1px solid #fdcb9e; min-height: 100px">
                  <div style="
                      padding: 10px;
                      background: #fdcb9e;
                      font-weight: 700;
                      font-size: 15px;
                      margin-bottom: 20px;
                      font-size: 16px;
                    ">
                    答案：
                  </div>
                  <div style="padding: 0 20px; font-size: 16px">
                    {{ element.studentAnswer }}
                  </div>
                </div>
                <el-collapse accordion>
                  <el-collapse-item>
                    <template slot="title">
                      <div style="display: flex; algin-items: center">
                        <span style="font-size: 18px; marign-left: 10px">正确答案</span><img style="margin-left: 10px"
                          src="../../../public/correct/correct.svg" alt="" />
                      </div>
                    </template>
                    <div>
                      {{ element.answer }}
                    </div>
                  </el-collapse-item>
                  <!-- <el-collapse-item
                    v-if="
                      information.auth === 'teacher_per' &&
                      assignmentInfo.student_correct == '1'
                    "
                  >
                    <template slot="title">
                      <div style="display: flex; algin-items: center">
                        <span style="font-size: 18px; marign-left: 10px"
                          >批改详情</span
                        ><img
                          style="margin-left: 10px"
                          src="../../../public/correct/correct.svg"
                          alt=""
                        />
                      </div>
                    </template>
                    <div>
                      <el-descriptions class="margin-top" :column="4" border>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-user"></i>
                            最高分
                          </template>
                          20分
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            最低分
                          </template>
                          10分
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            平均分
                          </template>
                          15分
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            操作
                          </template>
                          <el-button
                            type="success"
                            @click="visible = true"
                            size="mini"
                            >查看详情</el-button
                          >
                          <el-dialog
                            title="提示"
                            :visible.sync="visible"
                            width="30%"
                          >
                            <span>这是一段信息</span>
                            <span slot="footer" class="dialog-footer">
                              <el-button @click="visible = false"
                                >取 消</el-button
                              >
                              <el-button type="primary" @click="visible = false"
                                >确 定</el-button
                              >
                            </span>
                          </el-dialog>
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </el-collapse-item> -->
                </el-collapse>

                <div class="getScore" :class="{
                  correct: element.proportion == element.score,
                  mistake: element.score == 0,
                  warning:
                    element.score != 0 && element.score < element.proportion,
                }" v-if="typeof element.score === 'number'">
                  <span>本题得分:<span style="font-weight: 700">{{
                    element.score
                  }}</span>分</span>
                </div>
                <div v-if="element.showAdd" class="addBox">
                  <div @click="correct(element)" class="addOption add">
                    <img src="../../../public/publishAssignment/正确答案.svg" alt="" style="margin-right: 3px" /><span
                      style="line-height: 25px; color: #2672ff">批改分数</span>
                  </div>
                  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                    <el-input placeholder="请输入分数" v-model="score"></el-input>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="sureCorrect">确 定</el-button>
                    </span>
                  </el-dialog>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 评论 -->
      <div
        v-if="assignmentInfo.comment_disabled === '1'"
        style="width: 90%; margin: 0 auto"
      >
        <span
          style="
            margin-bottom: 20px;
            font-size: larger;
            font-weight: bold;
            display: block;
            border-bottom: 3px solid #cceabb;
            padding-bottom: 4px;
            width: 100px;
            text-align: center;
          ">作业评论</span>
        <Tinymce ref="editor" v-model="content" :height="40" :menubar="''" @critic="Critic" />
      </div>
      <div class="submitContainer">
        <!-- <el-button type="primary">draft</el-button> -->
        <el-button v-if="information.status === 'edit'" type="success" @click="submit('edit')">确认修改</el-button>
        <el-button v-if="information.status === 'publish' &&
          information.auth === 'student_per'
          " type="success" @click="submit('publish')">完成批改</el-button>
        <el-button v-if="information.auth === 'teacher_per'" type="success"
          @click="correctFinish('publish')">审核完成</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import UserAcatar from "@/components/UserAcatar.vue";
import Tinymce from "@/components/Tinymce";
export default {
  name: "corrent",
  components: {
    UserAcatar,
    Tinymce,
  },
  data() {
    return {
      show: false,
      userInfo: {},
      assignmentInfo: {},
      color: "#F56C6C",
      dialogVisible: false,
      questionList: [],
      correctForm: {
        score: 0,
        comment: "",
      },
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      currenttIndex: 1,
      visible: false,
      currentItem: {},
      value2: 2222,
      title: "今年的增长",
      loading: false,
      score: "",
      activeNames: "单选题",
      information: {},
      visibleArr: [],
      list: {},
      activeNames: ["单选题", "多选题", "简答题"],
      optionsItem: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      selectedOptions: {},
      content: "",
      students: [],
    };
  },
  async mounted() {
    console.log(this.$route.query);
    if (this.$route.query.auth === "teacher_per") {
      await this.getTeacherAssignmentInfo();
      console.log(this.questionList);
      console.log(this.visibleArr);
    } else if (this.$route.query.auth === "student_per") {
      await this.getAssignmentInfo();
    }
    // 通过this.$route.query来获取row信息
    this.information = this.$route.query;
    console.log(this.$route.query);
    this.userInfo = {
      ...JSON.parse(JSON.stringify(this.$store.state.user_info)),
    };
  },
  methods: {
    //
    async adopt(row) {
      console.log(row);
      let res = await this.$axios.post("/correct/isadopt", {
        sender: this.userInfo.user_id,
        recipient_SID: row.student_id,
        assignment_id: this.$route.query.assignment_id,
        student_correction_id: row.student_correction_id,
      });
      console.log(res);
      await this.getTeacherAssignmentInfo();
    },
    // 评论
    async Critic(msg) {
      console.log(msg);
      if (msg) {
        // let content = this.content.replace(/<\/?[^>]+>/gi, '')
        console.log(this.content);
        if (this.content != "") {
          let obj = {
            content: this.content,
            sender: this.userInfo.user_id,
            recipient_SID: this.$route.query.student_id,
            assignment_id: this.$route.query.assignment_id,
          };
          console.log(obj);
          // 向后端发请求
          let res = await this.$axios.post("/correct/critic", obj);
          console.log(res);
          if (res.code == 200) {
            this.$notify({
              title: "成功",
              message: "评论发布成功",
              type: "success",
              duration: 2000,
            });
          }
        }
      }
    },
    clickevent(index) {
      this.visibleArr[index] = true;
      console.log(this.visibleArr);
      console.log(123456);
    },
    // 教师完成审核，如果是学生批改的, 那么教师批改的结果其实是一样的，都是将最终分数给更新到学生的提交记录上面的
    async correctFinish(status) {
      console.log();
      let isCorrect = true;
      let Index;
      let item = this.list.shortAnswerQuestions.findIndex((item, index) => {
        return typeof item.score != "number";
      });
      console.log();
      if (item == -1) {
        console.log(this.questionList);
        console.log(this.$route.query);
        let postForm = {};
        postForm.questionList = this.questionList;
        console.log(this.$route.query.student_assignment_id);
        postForm.student_assignment_id =
          this.$route.query.student_assignment_id;
        postForm.status = status;
        console.log();
        let res = await this.$axios.post("/correct/correctFinish", {
          postForm,
        });
        if (res.code == 200) {
          this.$notify({
            title: "成功",
            message: "批改完成",
            type: "success",
            duration: 2000,
          });
          this.$router.push({
            path: "tcorrent",
          });
        }
      } else {
        this.$notify({
          title: "成功",
          message: `请批改简答题的第${item + 1}题`,
          type: "warning",
          duration: 2000,
        });
      }
    },
    // 第一次批改结果提交
    async submit(status) {
      let res = await this.$axios.post("/correct/submitScore", {
        questionList: this.questionList,
        student_correction_id: this.$route.query.student_correction_id,
        total_points: this.assignmentInfo.total_points,
        status,
      });
      console.log(res);
      if (res.code == 200) {
        this.$notify({
          title: "成功",
          message: "批改提交成功",
          type: "success",
          duration: 2000,
        });
        this.$router.push({
          path: "correct",
        });
      }
    },
    correct(element) {
      this.score = "";
      this.dialogVisible = true;
      this.currentItem = element;
    },
    sureCorrect() {
      this.currentItem.score = Number(this.score);
      console.log(123456);
      this.dialogVisible = false;
    },
    // 教师审核获取信息
    async getTeacherAssignmentInfo() {
      let res = await this.$axios.post("/correct/getInfo", {
        status: this.$route.query.status,
        assignment_id: this.$route.query.assignment_id,
        student_id: this.$route.query.student_id,
      });
      console.log(res);
      this.assignmentInfo = res.assignmentInfo;
      this.students = this.assignmentInfo.studentInfo;

      this.questionList = res.assignmentInfo.questionList.map((item) => {
        let obj = {};
        console.log(item, "item");
        if (item.question_type == "简答题") {
          obj.answer = item.correct_answer;
          obj.studentAnswer = item.student_answer;
          obj.question = item.essayQuestion;
          obj.correctRes = item.correctRes;
        } else {
          obj.answer = JSON.parse(item.correct_answer);
          obj.studentAnswer = JSON.parse(item.student_answer);
          obj.optionsList = JSON.parse(item.options_list);
          obj.question = item.choice_question;
        }
        obj.question_id = item.question_id;
        obj.id = String(Math.random()).slice(-5) + String(Date.now()).slice(-5);
        obj.editing = false;
        obj.showAdd = false;
        obj.questionType = item.question_type;
        obj.proportion = item.proportion;
        obj.score = item.score;
        return obj;
      });

      console.log(this.questionList, "sadasd");

      let singleChoiceQuestions;
      let multipleChoiceQuestions;
      let shortAnswerQuestions;
      singleChoiceQuestions = this.questionList.filter((item) => {
        if (item.questionType === "单选题") {
          return item;
        }
      });
      multipleChoiceQuestions = this.questionList.filter((item) => {
        if (item.questionType === "多选题") {
          return item;
        }
      });
      shortAnswerQuestions = this.questionList.filter((item) => {
        if (item.questionType === "简答题") {
          return item;
        }
      });
      this.list.singleChoiceQuestions = singleChoiceQuestions;
      this.list.multipleChoiceQuestions = multipleChoiceQuestions;
      this.list.shortAnswerQuestions = shortAnswerQuestions;

      console.log(this.list);
    },
    // 学生获取信息
    async getAssignmentInfo() {
      // this.loading = true;
      // 这个地方呈现出来的应该是属于该学生的批改记录中的数据, 那么选择题是直接从其
      console.log(this.information);
      let res = await this.$axios.post("/correct/getAssignmentInfo", {
        status: this.$route.query.status,
        student_correction_id: this.$route.query.student_correction_id,
        assignmentId: this.$route.query.assignment_id,
        studentAssignmentId: this.$route.query.student_assignment_id,
      });
      console.log(res);
      this.assignmentInfo = res.assignmentInfo;
      this.questionList = res.assignmentInfo.questionList.map((item) => {
        let obj = {};
        console.log(item, "item");
        if (item.question_type == "简答题") {
          obj.answer = item.correct_answer;
          obj.studentAnswer = item.student_answer;
          obj.question = item.essayQuestion;
        } else {
          obj.answer = JSON.parse(item.correct_answer);
          obj.studentAnswer = JSON.parse(item.student_answer);
          obj.optionsList = JSON.parse(item.options_list);
          obj.question = item.choice_question;
        }
        obj.question_id = item.question_id;
        obj.id = String(Math.random()).slice(-5) + String(Date.now()).slice(-5);
        obj.editing = false;
        obj.showAdd = false;
        obj.questionType = item.question_type;
        obj.proportion = item.proportion;
        obj.score = item.score;
        return obj;
      });
      console.log(this.questionList);
      let singleChoiceQuestions;
      let multipleChoiceQuestions;
      let shortAnswerQuestions;
      singleChoiceQuestions = this.questionList.filter((item) => {
        if (item.questionType === "单选题") {
          return item;
        }
      });
      multipleChoiceQuestions = this.questionList.filter((item) => {
        if (item.questionType === "多选题") {
          return item;
        }
      });
      shortAnswerQuestions = this.questionList.filter((item) => {
        if (item.questionType === "简答题") {
          return item;
        }
      });
      this.list.singleChoiceQuestions = singleChoiceQuestions;
      this.list.multipleChoiceQuestions = multipleChoiceQuestions;
      this.list.shortAnswerQuestions = shortAnswerQuestions;

      console.log(this.list);
    },
    hideButtons(element) {
      element.showAdd = false;
    },
    gotoTargetPage() {
      this.$router.push({ path: "correct" });
    },
    change(msg) {
      this.$emit("transfer", msg);
    },
    editScore() {
      this.dialogVisible = true;
      this.correctForm.score = this.work.score;
      this.correctForm.comment = this.work.comment;
    },
    submitCorrect() {
      if (
        !/^\d+$/.test(this.correctForm.score) ||
        this.correctForm.score < 0 ||
        this.correctForm.score > 100
      ) {
        this.$message.error("请输入零到一百的整数");
        return;
      }
      // 提交批改结果
      console.log(this.correctForm);
      // 更新成绩和评语
      this.work.score = this.correctForm.score;
      this.work.comment = this.correctForm.comment;
      // 关闭弹窗
      this.dialogVisible = false;
      // 清空表单
      this.$refs.form.resetFields();
    },
  },
  computed: {
    currentData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.students.slice(startIndex, endIndex);
    },
    allScore() {
      let score = 0;
      this.questionList.forEach((item) => {
        score += item.score;
      });
      return score;
    },
    allProportion() {
      let score = 0;
      this.questionList.forEach((item) => {
        score += item.proportion;
      });
      return score;
    },
    singleAllScore() {
      let score = 0;
      this.list.singleChoiceQuestions.forEach((element) => {
        score += element.score;
      });
      return score;
    },
    multipleAllScore() {
      let score = 0;
      this.list.multipleChoiceQuestions.forEach((element) => {
        score += element.score;
      });
      return score;
    },
    shortAllScore() {
      let score = 0;
      this.list.shortAnswerQuestions.forEach((element) => {
        score += element.score;
      });
      return score;
    },
  },
  // 自定义指令，判断点击位置是否在盒子内部
  directives: {
    clickOutside: {
      bind(el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
          if (!(el === event.target || el.contains(event.target))) {
            binding.value.handler(binding.value.element);
          }
        };
        document.body.addEventListener("mousedown", el.clickOutsideEvent);
      },
      unbind(el) {
        document.body.removeEventListener("mousedown", el.clickOutsideEvent);
      },
    },
  },
};
</script>
<style lang="less" scoped>
.submitContainer {
  // width: 80%;
  // margin: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
  margin-top: 30px;
}

.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}

.getScore {
  // margin-left: 50px;
  font-size: 16px;
  border: 1px #ccc solid;
  padding: 15px;
}

.correct {
  background: #cceabb;
}

.mistake {
  background: #f56c6c;
}

.warning {
  background: #e6a23c;
}

.infoContainer {
  margin: auto;
  width: 90%;
  // display: flex;
}

.studentAnswer {
  background: #cceabb;
}

.el-icon-search {
  color: #cceabb;
}

.search-box {
  border-bottom: 2px solid #bbb;
  height: 80px;
}

.se {
  margin: 0 auto;
}

.acatar {
  float: right;
}

.search {
  color: #cceabb;
  font-size: 18px;
  width: 300px;
  margin-left: 100px;
  margin-top: 20px;
}

.mojitou {
  width: 500px;
  height: 120px;
  border: 1px solid #bbb;
  margin: 0 auto;
  border-radius: 5%;
}

.back {
  margin-top: 20px;
}

.work-detail-page {
  padding: 20px;
}

.operate-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.work-detail-page {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.work-info {
  text-align: center;
  margin-bottom: 50px;
}

.work-status {
  font-size: 20px;
  color: #67c23a;
}

.work-score {
  text-align: center;
  margin-bottom: 50px;
}

.score-title {
  display: flex;
  align-items: baseline;
  font-size: 60px;
  font-weight: bold;
  color: #409eff;
}

.score-comment {
  margin-top: 20px;
  text-align: left;
}

.operate-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.score-dialog {
  padding: 20px;
}

container {
  max-width: 1100px;
  margin: 0 auto;
}

.container .el-input__inner {
  font-size: 16px;
}

.avatar {
  float: right;
  margin-top: 15px;
}

.addBox {
  display: flex;
  margin-left: 30px;
  margin-top: 20px;
}

.add {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.score {
  display: inline-block;
  width: 100px;
}

.addOption {
  margin-right: 30px;
}

.batchAdd {
  margin-right: 30px;
}

.board-item:hover .deleteOption {
  display: block;
}

.deleteOption {
  display: none;
}

.hovered-item {
  opacity: 0;
  transition: opacity 0.5s;
}

// 想要修改el-input的样式需要这样写
::v-deep .enterpriseName .el-textarea__inner {
  width: 100%;
  color: #000;
  border: none;
  outline: none;
  background: #f9f9fc;
  padding: 5px;
  font-size: 16px;
}

.item {
  display: flex;
  background: white;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1),
    -1px 1px 3px 0px rgba(0, 0, 0, 0.1), -3px 5px 6px 0px rgba(0, 0, 0, 0.09),
    -8px 10px 8px 0px rgba(0, 0, 0, 0.05),
    -13px 18px 9px 0px rgba(0, 0, 0, 0.01), -21px 28px 10px 0px rgba(0, 0, 0, 0);
  padding: 30px 50px;
  width: 80%;
  margin: 20px auto;
  flex-direction: column;
  border: 1px solid transparent;
  transition: border-color 0.3s;
  border-radius: 3px;
}

.active {
  border: 2px #409eff solid;
}

.questionContent {
  padding: 5px;
  display: inline-block;
  width: 300px;
  // display: block;
}

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.question input {
  outline: none;
  border: none;
  padding: 5px;
  width: 300px;
  background: #f9f9fc;

  white-space: pre-wrap;
}

.questionNumber {
  margin-right: 30px;
}

.board-column {
  min-width: 300px;
  width: 90%;
  margin: auto;
  margin-top: 30px;
  min-height: 100px;
  height: auto;
  overflow: hidden;
  // background: #f6f7f9;
  border-radius: 3px;

  .board-column-header {
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #e6a23c;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10px solid transparent;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    .board-item {
      cursor: pointer;
      width: 100%;
      height: auto;
      margin: 5px 0;
      background-color: #fff;
      text-align: left;
      // line-height: 54px;
      padding: 30px 30px;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
      display: flex;
    }
  }
}
</style>